<!DOCTYPE html>
<html>
  <head>
    <title>综合网站</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script type="text/javascript" src="/javascripts/web.js"></script>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
  </head>
  <body>
    <div class="parent">
        <div class="header">
            <h1>第二阶段--综合网站</h1>
        </div>
        <div class="nav">
                <a href="#" onclick="showMenu()" id="menu">菜单 >>></a>
                <ul id="menuList">
                    <li><a href="javascript:void(0);" onclick="show('message')">留言板</a></li>
                    <li><a href="javascript:void(0);" onclick="show('article')">文章</a></li>
                    <!--<li><a href="javascript:void(0);" onclick="show('photo')">相册</a></li>-->
                </ul>
        </div>
        <div class="contain">
            <div class="content box">
                <div class="message">
                    <h3>留言板</h3>
                    <hr>
                    <% if(user){ %>
                    <p>留言：<input type="text" value="" id="message">&nbsp;&nbsp;<a href="#" onclick="say()">提交</a></p>
                    <% } %>
                    <% msList.forEach(data=>{ %>
                    <h4>&nbsp;&nbsp;<%=data.ms%>-- 作者：<%=data.creator%>，创建时间： <%=data.createTime%> </h4>
                    <% }) %>
                </div>
                <div class="article"  style="display: none;">
                    <h3>文章</h3>
                    <hr>
                    <% if(user){ %>
                    <a href="/create">创建新文章</a>
                    <% } %>
                    <% list.forEach(doc=>{ %>
                    <h4>主题：<%= doc.title%></h4>
                    <h4>内容：<%=doc.body%></h4>
                    <p><% if(user){ %><a href="/<%=doc.id%>/edit">编辑</a>|<a href="/<%=doc.id%>/delete" onclick="return del()">删除</a><% } %> 创建时间： <%=doc.createTime%> | 更新时间：<%=doc.updateTime%></p>
                    <hr/>
                    <% }) %>
                </div>
                <div class="photo" style="display: none;">
                    <p>相册</p>
                </div>
            </div>
            <div class="left box">
                <div class="login" id="login">
                    <% if(message){ %>
                    <h5><%=message.error%></h5>
                    <% } %>
                    <% if(user){ %>
                    <h3><%=user.loginname%>，已登录|<a href="/users/logout">退出</a></h3>
                    <% }else{ %>
                    <form action="/users/login" method="post" onsubmit="return validate('1')">
                        <p>用户名：<input type="text" name="loginname" id="logName"></p>
                        <p>密&nbsp;&nbsp;码：<input type="password" name="password" id="logPassword"></p>
                        <p><img src="/users/vimg" alt=""><input type="text" name="vimg"></p>
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="注册" onclick="reg('in')">&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="登录"></p>
                    </form>
                    <% } %>
                </div>
                <div class="login" style="display: none;" id="reg">
                    <form action="/users/reg" method="post" id="regForm" onsubmit="return validate('2')">
                        <p>用&nbsp;户&nbsp;名：<input type="text" name="loginname" id="regName"></p>
                        <p>密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" name="password" id="regPassword"></p>
                        <p>确认密码：<input type="password" name="confirm" id="regConfirm"></p>
                        <p><img src="/users/vimg" alt=""><input type="text" name="vimg"></p>
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="注册">&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="返回" onclick="reg('back')"></p>
                    </form>
                </div>
            </div>
        </div>
    </div>
  </body>
  <script type="text/javascript">
      const socket = io.connect(); //localhost

      socket.on("newsay", function(){
          location.reload();
      })

      function say(){
          const ms = document.querySelector("#message").value;
          socket.emit("say", ms);
      }
  </script>
</html>
